<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>客服</title>
		<link rel="shortcut icon" href="__IMG__/favicon.ico" />
		<link rel="bookmark" href="__IMG__/favicon.ico" type="image/x-icon" 　/>
		<link href="__CSS__/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="__CSS__/common.css"/>
		<link rel="stylesheet" type="text/css" href="__CSS__/index.css"/>
		<script src="__JS__/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" charset="utf-8">
	      	mui.init();
        </script>
	</head>
	<body class="bg_e">
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">客服</h1>
		</header>

		<nav class="foot padding_lr5 mui-bar mui-bar-tab" style="padding-top: 15px">

				<div class="comment">
				  <div class="com_form">
				    <div class="padding_5">
				      <span class="msg_inp"><textarea class="input" id="saytext" name="saytext" placeholder="发送文字消息"></textarea></span>
				      <span class="right send">
						<input type="button" id="" value="发送" class="sub_btn" />
					</span>
				    </div>
				  </div>
				</div>
		</nav>
		<div class="mui-content " style="padding-bottom: 100px;" id="big">
			<input type="hidden" id="nickname" value="{$nickname}">
			<input type="hidden" id="head" value="{$head}">
			<input type="hidden" id="mobile" value="{$mobile}">
			<p style="text-align: center">{$date}</p>
			<div class="lottery_comm padding_10" >
				<i><img style="border-radius: 50%" src="__IMG__/service.png"/></i>
				<span>客服</span>
				<div class="lottery_comm_boss">
					<i></i>
					<span class="lottery_comm_font lin_20">
						亲，有什么为你服务的
					</span>
				</div>
			</div>
		</div>
		<div class="overlay">
		</div>
	</body>
		<script type='text/javascript' src='__JS__/webim.config.js'></script>
		<script type='text/javascript' src='__JS__/strophe-1.2.8.min.js'></script>
		<script type='text/javascript' src='__JS__/websdk-1.4.13.js'></script>
		<script src="__JS__/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="__JS__/index.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
		$(function(){
		    var username = $('#mobile').val();
            var conn = new WebIM.connection({
                isMultiLoginSessions: WebIM.config.isMultiLoginSessions,
                https: typeof WebIM.config.https === 'boolean' ? WebIM.config.https : location.protocol === 'https:',
                url: WebIM.config.xmppURL,
                heartBeatWait: WebIM.config.heartBeatWait,
                autoReconnectNumMax: WebIM.config.autoReconnectNumMax,
                autoReconnectInterval: WebIM.config.autoReconnectInterval,
                apiUrl: WebIM.config.apiURL,
                isAutoLogin: true
            });
            /*登录*/
            var options = {
                apiUrl: WebIM.config.apiURL,
                user: username,
                pwd: username,
                appKey: WebIM.config.appkey
            };
            conn.open(options);
            conn.listen({
                onOpened: function ( message ) {          //连接成功回调
					console.log('连接成功')
                },
                onClosed: function ( message ) {
                    console.log('连接关闭')
                },         //连接关闭回调
                onTextMessage: function ( message ) {
                    var msg = message.data;
                    var strrs = "";
                    strrs +="<div class='lottery_comm padding_10' >"
                        +"<i><img style='border-radius: 50%' src="+"__IMG__/service.png"+"></i>"
                        +"<span>客服</span>"
                        +"<div class='lottery_comm_boss'>"
                        +"<i></i>"
                        +"<span class='lottery_comm_font lin_20'>"
                        +msg
                        +"</span>"
                        +"</div>"
                        +"</div>";
                    $("#big").append(strrs);
                    $('#big').scrollTop( $('#big')[0].scrollHeight );


                },//收到文本消息
                onPresence: function ( message ) {
                    handlePresence(message);
                }
            });

			$(".sub_btn").click(function(){
				var str      = $("#saytext").val();
				var head     = $("#head").val();
                var nickname = $("#nickname").val();
				$("#saytext").val("");
				var strr = "";
					strr +="<div class='lottery_comm padding_10' >"
							+"<i><img style='border-radius: 50%' src="+head+"></i>"
							+"<span>"+nickname+"</span>"
							+"<div class='lottery_comm_boss'>"
							+"<i></i>"
							+"<span class='lottery_comm_font lin_20'>"
						    +str
						    +"</span>"
						    +"</div>"
						    +"</div>";
				$("#big").append(strr);
                $('#big').scrollTop( $('#big')[0].scrollHeight );
                var id = conn.getUniqueId();                 // 生成本地消息id
                var msg = new WebIM.message('txt', id);      // 创建文本消息
                msg.set({
                    msg: str,                  // 消息内容
                    to: 'kefu1',                          // 接收消息对象（用户id）
                    roomType: false,
                    success: function (id, serverMsgId) {

                    },
                    fail: function(e){
                       
                    }
                });
                msg.body.chatType = 'singleChat';
                conn.send(msg.body);
			});

            conn.subscribe({
                to: username,
                // Demo里面接收方没有展现出来这个message，在status字段里面
                message: '客服聊天!'
            });



		});

		</script>
</html>
